import React from 'react';
import { Button, Drawer, Popconfirm, Tag } from 'antd';
import Icon from '@/component/Icon';
import store from '@/store';

import Styles from './index.module.less';

export interface File {
    filename: string;
    url: string;
    status: 'success' | 'error' | 'normal';
}

export type FileList = Array<File>;
type ComponentProps = {
    fileList: FileList;
    visible: boolean;
    preview: (file: File, index: number) => void;
    delete: (file: File, index: number) => void;
    toggleFileListDrawer: (visible: boolean) => void;
    printFile: (fileList?: FileList) => unknown;
    cleanTask: () => void;
};

export default React.memo<ComponentProps>((props) => {
    const { app } = store.useStore();
    const statusViewer = {
        success: {
            color: '#87d068',
            text: '成功'
        },
        error: {
            color: '#f50',
            text: '失败'
        },
        normal: {
            color: '#ccc',
            text: '入队'
        }
    };

    const renderEmpty = () => {
        return (
            <section className={Styles.empty}>
                暂无需要打印的任务，请选择文件后重试！
            </section>
        );
    };

    const renderPrinterTask = () => {
        const countPrinterTaskCount = props.fileList.length || 0;
        return (
            <section className={Styles.printerTaskWrap}>
                <span>打印任务：({countPrinterTaskCount}) 份</span>
                {(props.fileList.length && (
                    <Popconfirm
                        title="确认要清除所有的打印任务吗?"
                        okText="确认"
                        cancelText="取消"
                        onPopupClick={props.cleanTask}
                    >
                        <Button className={Styles.cleanAll} size="small">
                            清除全部打印任务
                        </Button>
                    </Popconfirm>
                )) ||
                    ''}
            </section>
        );
    };

    const renderDelPrintFile = (item: File, index: number) => {
        return item.status === 'success' ? (
            <Button
                loading={app.loadingTextOption.loading}
                onClick={() => props.delete(item, index)}
                icon={<Icon title="删除" size={20} name="icon-delete"></Icon>}
            />
        ) : (
            <Popconfirm
                title="确认要删除此文件吗?"
                okText="确认"
                cancelText="取消"
                onConfirm={() => props.delete(item, index)}
            >
                <Button
                    loading={app.loadingTextOption.loading}
                    icon={
                        <Icon title="删除" size={20} name="icon-delete"></Icon>
                    }
                />
            </Popconfirm>
        );
    };

    const renderFileList = () => {
        return (
            <ul>
                {props.fileList.map((item, index) => (
                    <li
                        title={item.filename}
                        className={Styles.fileListItem}
                        key={encodeURIComponent(item.url) + String(index)}
                    >
                        <section className={Styles.fileListItemName}>
                            <span>{item.filename}</span>
                        </section>
                        <Tag color={statusViewer[item.status].color}>
                            {statusViewer[item.status].text}
                        </Tag>
                        <span>
                            <Button
                                loading={app.loadingTextOption.loading}
                                onClick={() => props.printFile([item])}
                                icon={
                                    <Icon
                                        title="打印"
                                        size={20}
                                        name="icon-print"
                                    />
                                }
                            />
                            <Icon
                                size={20}
                                onClick={() => props.preview(item, index)}
                                name="icon-view"
                            ></Icon>
                            {renderDelPrintFile(item, index)}
                        </span>
                    </li>
                ))}
            </ul>
        );
    };

    return (
        <Drawer
            closable={false}
            title={renderPrinterTask()}
            placement="bottom"
            open={props.visible}
            onClose={() => props.toggleFileListDrawer(false)}
            className={Styles.drawer}
        >
            <section className={Styles.fileList}>
                {props.fileList.length ? renderFileList() : renderEmpty()}
            </section>
        </Drawer>
    );
});
